{% extends "performance/navigation.html" %}
<!--main content start-->
{% block body %}
    <section id="main-content">
        <section class="wrapper">
            <div style="text-align:center;clear:both;position:absolute;top:0;left:260px">
{#                <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>#}
{#                <script src="/follow.js" type="text/javascript"></script>#}
            </div>
            <canvas class="canvas" style="width: 100%; height: 120%; margin-top: 4.1%"></canvas>

            <div class="help" style="display: none">?</div>

            <div class="ui" style="display: none;">
                <input class="ui-input" type="text"/>
                <span class="ui-return">↵</span>
            </div>

            <div class="overlay">
                <div class="tabs">
                    <div class="tabs-labels"><span class="tabs-label">Commands</span><span
                            class="tabs-label">Info</span><span
                            class="tabs-label">Share</span></div>

                    <div class="tabs-panels">
                        <ul class="tabs-panel commands">
                            <li class="commands-item"><span class="commands-item-title">Text</span><span
                                    class="commands-item-info"
                                    data-demo="Hello :)">Type anything</span><span
                                    class="commands-item-action">Demo</span></li>
                            <li class="commands-item"><span class="commands-item-title">Countdown</span><span
                                    class="commands-item-info" data-demo="#countdown 10">#countdown<span
                                    class="commands-item-mode">number</span></span><span
                                    class="commands-item-action">Demo</span></li>
                            <li class="commands-item"><span class="commands-item-title">Time</span><span
                                    class="commands-item-info"
                                    data-demo="#time">#time</span><span
                                    class="commands-item-action">Demo</span></li>
                            <li class="commands-item"><span class="commands-item-title">Rectangle</span><span
                                    class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span
                                    class="commands-item-mode">width x height</span></span><span
                                    class="commands-item-action">Demo</span></li>
                            <li class="commands-item"><span class="commands-item-title">Circle</span><span
                                    class="commands-item-info" data-demo="#circle 25">#circle<span
                                    class="commands-item-mode">diameter</span></span><span
                                    class="commands-item-action">Demo</span></li>

                            <li class="commands-item commands-item--gap"><span
                                    class="commands-item-title">Animate</span><span
                                    class="commands-item-info"
                                    data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span
                                    class="commands-item-mode">command1</span>&nbsp;|<span
                                    class="com mands-item-mode">command2</span></span><span
                                    class="commands-item-action">Demo</span>
                            </li>
                        </ul>

                        <div class="tabs-panel ui-details">
                            <div class="ui-details-content">
                                <h1>Shape Shifter</h1>
                                <p>
                                    An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth
                                    Cachia<a/>.<br/>
                                    <a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font
                                        Awesome</a> is
                                    being used to render all #icons.
                                </p>

                                <br/>
                                <p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up"
                                            target="_blank">Shape
                                    Shifter</a> to use icons.</p>
                            </div>
                        </div>

                        <div class="tabs-panel ui-share">
                            <div class="ui-share-content">
                                <h1>Sharing</h1>
                                <p>Simply add <em>?a=</em> to the current URL to share any static or animated text.
                                    Examples:</p>
                                <p>
                                    <a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/>
                                    <a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3"
                                       target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown
                                        4</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- page end-->
        </section>
    </section><!-- /MAIN CONTENT -->

{% endblock %}
{% block javascript %}
    <script src="../../qa/static/perform/js/developing_index.js"></script>
    <script src="../../qa/static/perform/js/morris-conf.js"></script>
    <script src="../../qa/static/js/plugins/morris/raphael.min.js"></script>
    <script src="../../qa/static/js/plugins/morris/morris.min.js"></script>
    <script src="../../qa/static/js/plugins/morris/morris-data.js"></script>
    <link rel="stylesheet" href="../../qa/static/css/plugins/morris.css">
{% endblock %}



